import React, { Component } from 'react'
import axios from 'axios'

export default class Cinema extends Component {
    state = {
        cinemaList: [],
        myText: ""
    }
    constructor() {
        super()
        let url = "https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=5510496"
        axios({
            url: url,
            headers: {
                'X-Client-Info': '{ "a": "3000", "ch": "1002", "v": "5.2.1", "e": "16812175742925156196417537", "bc": "110100" }',
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then(res => {
            this.setState({
                cinemaList: res.data.data.cinemas
            })
        })
    }
    render() {
        return (
            <div>
                <input value={this.state.myText} onChange={(evt) => {
                    this.setState({
                        myText: evt.target.value
                    })
                }} />
                {

                    this.getCinemaList().map((item) =>
                        <dl key={item.cinemaId}>
                            <dd>{item.name}</dd>
                            <dd>{item.address}</dd>
                        </dl>
                    )

                }
            </div>
        )
    }

    getCinemaList() {
        return this.state.cinemaList.filter((item) => {
            return item.name.toUpperCase().includes(this.state.myText.toUpperCase()) ||
                item.address.toUpperCase().includes(this.state.myText.toUpperCase())
        })
    }

    handlerInput = (event) => {
        var value = event.target.value;
        var newList = this.state.cinemaList.filter((item) => {
            return item.name.toUpperCase().includes(value.toUpperCase()) ||
                item.address.toUpperCase().includes(value.toUpperCase())
        })
        this.setState({
            cinemaList: newList
        })
    }
}
